<template>
  <el-container style="padding: 15px">
    <el-header height="130px">
      <el-form size="small" label-width="70px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="5">
            <el-form-item label="项目编号">
              <el-input v-model="searchAllReportObj.reportId" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="坐落">
              <el-input v-model="searchAllReportObj.beLocated" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="业务人员">
              <el-select v-model="searchAllReportObj.businessUserId" style="width: 100%" clearable filterable>
                <el-option v-for="item in noPageReportUserList" :key="item.id" :value="item.id" :label="item.nickName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="估价师">
              <el-select v-model="searchAllReportObj.valueUserId" clearable filterable>
                <el-option v-for="item in valuerList" :key="item.id" :label="item.account" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="3">
            <el-form-item label="出具日期">
              <el-date-picker
                v-model="searchAllReportObj.startReportProvideTime"
                value-format="timestamp"
                type="date"
                placeholder="开始时间"
                @change="startTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-date-picker
                v-model="searchAllReportObj.endReportProvideTime"
                value-format="timestamp"
                type="date"
                placeholder="结束时间"
                @change="EndTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="价值时点">
              <el-date-picker
                v-model="searchAllReportObj.startReportEvaluateTime"
                value-format="timestamp"
                type="date"
                placeholder="开始时间"
                @change="startTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-date-picker
                v-model="searchAllReportObj.endReportEvaluateTime"
                value-format="timestamp"
                type="date"
                placeholder="结束时间"
                @change="EndTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle" justify="center">
          <el-col :span="4">
            <el-form-item label-width="0px">
              <el-button type="primary" @click="getList">搜索</el-button>
              <el-button @click="clearSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-table v-loading="listLoading" :data="reportList">
        <el-table-column label="报告编号" prop="reportId" />
        <el-table-column label="坐落" prop="beLocated" />
        <el-table-column label="评估单价" prop="reportUnitPrice" />
        <el-table-column label="估价总值(万元)" prop="reportTotalValue" />
        <el-table-column label="价值时点" prop="reportEvaluateTime" type="date" />
        <el-table-column label="出具日期" prop="reportProvideTime" type="date" />
        <el-table-column label="估价员" prop="valuerUserName" />
        <el-table-column label="业务员" prop="businessUserName" />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { ellipsisString } from '@/utils'
import { noPageUser } from '@/api/user'
import { getSearchFormList } from '@/api/statistics'
import { searchEnquiry } from '@/api/enquiry'

export default {
  name: 'Index',
  data() {
    return {
      reportList: [],
      leafList: [],
      projectList: [],
      noPageReportUserList: [],
      valuerList: [],

      currentPage: 1,
      sizePage: 10,
      totalPage: 0,

      searchAllReportObj: {},

      listLoading: false
    }
  },

  created() {
    this.init()
  },

  methods: {

    init() {
      this.getList()
      this.getNoPageUserList()
      this.getSearchForm()
    },

    handleSizeChange(val) {
      this.sizePage = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    getList() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const searchAllReportObj = this.searchAllReportObj
      searchEnquiry(currentPage, sizePage, searchAllReportObj).then(res => {
        this.reportList = res.data.list
        this.totalPage = res.data.total
      })
    },

    clearSearch() {
      this.searchAllReportObj = {}
      this.getList()
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },
    subName(row, column, cellValue, index) {
      return ellipsisString(cellValue)
    },
    getNoPageUserList() {
      noPageUser().then(res => {
        this.noPageReportUserList = res.data.users
      })
    },
    getSearchForm() {
      getSearchFormList().then(res => {
        this.valuerList = res.data.users
      })
    }
  }
}
</script>

<style scoped>

</style>
